<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/api.css">
    <style>
        body,
        html {
            background-color: #fff;
        }

        #back img {
            width: 0.8rem;
            height: 0.8rem;
            margin-left: 0.8rem;
        }

        .hd {
            height: 2rem;
            background-color: transparent;
        }


        .logo {
            width: 8rem;
            height: 8rem;
            margin: 3rem 0 3rem 5.5rem;
        }

        .user_phone,
        .user_psw {
            padding: 0 2rem;
            position: relative;
        }

        .user_psw .auth_code {
            position: absolute;
            right: 2rem;
            font-size: 0.6rem;
            top: 1.1rem;
        }

        .user_phone img,
        .user_psw img {
            width: 1rem;
            height: 1.4rem;
            position: absolute;
            left: 2.5rem;
            top: 0.75rem;
        }

        input {
            width: 85%;
            padding-left: 15%;
            height: 3rem;
            line-height: 3rem;
            border-bottom: 1px solid #eee !important;
            outline: none;
        }

        .register_forget {
            width: 100%;
            height: 1rem;
            font-size: 0.6rem;
            margin: 0.5rem 0;
        }

        .register_forget .register {
            float: left;
            margin-left: 2rem;
        }

        .register_forget .forget {
            float: right;
            margin-right: 2rem;
        }

        .login_btn {
            padding: 0 2rem;
            margin-top: 2rem;
        }

        .login_btn div {
            width: 100%;
            height: 2rem;
            background-color: #2780e8;
            text-align: center;
            line-height: 2rem;
            border-radius: 0.2rem;
            color: #fff;
            font-size: 0.7rem;
        }

        .line {
            padding: 0 2rem;
            margin-top: 4rem;
            color: #ebebeb;
            font-size: 0.6rem;
            position: relative;
        }

        .line div {
            width: 35%;
            height: 1px;
            background-color: #ebebeb;
        }

        .line div:first-child {
            float: left;
        }

        .line div:last-child {
            float: right;
        }

        .line p {
            position: absolute;
            top: -0.5rem;
            left: 42%;
        }

        .wx_login {
            width: 100%;
            height: 2rem;
            text-align: center;
            padding-top: 2rem;
        }

        .wx_login img {
            width: 2rem;
            height: 2rem;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav hd">
        <a id="back" class="aui-pull-left aui-btn">
            <img src="../image/back_icon.png" alt="">
        </a>
    </header>

    <div  id="app" v-cloak>
        <div>
            <img class="logo" src="../image/logo.png" alt="">
        </div>

        <div class="user_phone">
            <img src="../image/phone_icon.png" alt="">
            <input type="tel" v-model="tel" maxlength="11" placeholder="请输入您的手机号">
        </div>
        <div class="user_psw">
            <img src="../image/auth_code_icon.png" alt="">
            <input type="text" v-model="code" placeholder="请输入验证码">
            <div class="auth_code" onclick="getCode()">{{get_auth_code}}</div>
        </div>

        <div class="register_forget">
            <p class="register openwin" data-win="login">立即登录</p>
            <!-- <p class="forget">忘记密码</p> -->
        </div>

        <div class="login_btn">
            <div>注 册</div>
        </div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script>
    apiready = function () {
        hb_ready()
    }

    // 使用vue做双向数据绑定
    var app = new Vue({
        el: "#app",
        data: {
            tel: '', //用户输入的手机号
            code: '', //用户输入的验证码

            miaoshu: 60, //倒计时的秒数
            get_auth_code: '获取验证码',
        },
    })

    //点击获取验证码
    function getCode() {
        if (app.miaoshu != 60) {
            return;
        }
        if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(app.tel))) {
            toast('请填写正确的手机号后再获取验证码');
            return;
        }
        daojishi()

        post_ajax('', {
            tel: app.tel,
            mode: 1
        }, function (ret, err) {
            //alert(JSON.stringify(ret));
            if (ret.code != 200) {
                app.miaoshu = 1;
            } else {
                toast("网络不通畅，请稍后再试！")
            }
            if (err) {
                alert("网络不通畅，请稍后再试！")
            }
            toast(ret.msg);
        });

    }
    //倒计时
    function daojishi() {
        app.get_auth_code = '等待60秒'

        var t = setInterval(function () {
            app.miaoshu--;
            app.get_auth_code = '等待' + app.miaoshu + '秒'
            if (app.miaoshu == 0) {
                clearInterval(t)
                app.get_auth_code = '获取验证码'
                app.miaoshu = 60;
            }

        }, 1000)
    }
</script>